<template>
  <!--    <Matrix/>-->
  <div id="indexPage">
    <Receive @message="publish"/>
    <!--  主导航头  -->
    <div id="main-nav">
      <NavBar/>
    </div>
    <!--  内容主体  -->
    <div id="main-body">
      <!--   左侧工具栏   -->
      <LeftToolBar/>
      <!--  左侧工具栏窗口    -->
      <LeftToolWindow v-show="leftTool.leftShow"/>
      <!--  左工具窗口分割线  左侧工具窗口显示分割线随之展示    -->
      <Slide v-show="leftTool.leftShow" @widthChange="leftWidthChange"/>

      <!--   主视图显示     -->
      <Window/>
      <!--  右工具窗口分割线      -->
      <Slide v-show="rightTool.rightShow" @widthChange="rightWidthChange"/>
      <!--  右侧工具栏窗口    -->
      <RightToolWindow v-show="rightTool.rightShow"/>
      <!--   右侧工具栏   -->
      <RightToolBar/>
    </div>
    <!--  页脚  -->
    <div id="main-footer">
    </div>
  </div>
</template>

<script setup lang="ts">
import NavBar from "./window/nav/NavBar.vue";
import Slide from "./Slide.vue";
import LeftToolBar from "./toolbar/left/LeftToolBar.vue";
import LeftToolWindow from "./toolbar/left/LeftToolWindow.vue";
import RightToolWindow from "./toolbar/right/RightToolWindow.vue";
import RightToolBar from "./toolbar/right/RightToolBar.vue";
import Window from "./window/Window.vue";
import {useLeftToolStore} from "../../store/leftTool";
import {useRightToolStore} from "../../store/rightTool";
import {useFileStore} from "../../store/filesTool";
import Receive from "./Receive.vue";
import {ElNotification} from "element-plus";
import {useNotifyStore} from "../../store/notify";
import {type} from "../../model/type";
import {onMounted} from "vue";
import {useThemeStore} from "../../store/theme";

const theme = useThemeStore()
const leftTool = useLeftToolStore()
const rightTool = useRightToolStore()
const file = useFileStore()
const notify = useNotifyStore()

// 设置分割线拖动修改窗口宽度
function leftWidthChange(movement) {
  let width = leftTool.leftWidth
  width -= movement;
  leftTool.SetLeftWidth(width)
}

// 设置分割线拖动修改窗口宽度
function rightWidthChange(movement) {
  let width = rightTool.rightWidth
  width += movement;
  rightTool.SetRightWidth(width)
}

function publish(msg: string) {
  let message = new type.NotifyMessage()
  message.type = 'warning'
  message.message = msg
  message.title = 'test'
  notify.Message(message)
  PublishNotification(message)
  ElNotification({
    type: 'warning',
    title: 'test',
    message: msg,
    position: 'bottom-right'
  })
}

function PublishNotification(message: type.NotifyMessage) {
  if (Notification.permission === "granted") {
    if (document.hidden) {
      PushNotify(message)
    }
  } else {
    // 获取授权
    Notification.requestPermission((res) => {
    })
  }

}

function PushNotify(message: type.NotifyMessage) {
  let pub = new Notification(message.title, {
    body: message.message,
    actions: []
  })
  pub.onshow = function (event) {
    console.log('show : ', event);
  }
  pub.onclose = function (event) {
    console.log('close : ', event);
  }
  pub.onclick = function (event) {
    pub.close();
  }
}

onMounted(() => {
})

</script>

<style scoped>
#indexPage {
  width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#main-nav {
  height: 50px;
  /* 导航栏底边样式 */
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: v-bind('theme.color.DividingLine');
}

#main-body {
  height: 100%;
  overflow: auto;
}

#main-footer {
  height: 50px;
}

#main-body {
  display: flex;
  flex-direction: row;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: v-bind('theme.color.DividingLine');
}

#main-footer {
  height: 50px;
}

</style>